div {
    width: 200px;
    height: 200px;
    margin: 10px;
}

.div1>img {
    width: 100%;
    height: 100%;
    transition: .5s filter;
    filter: sepia(1) saturate(4) hue-rotate(295deg);
}

.div1>img:hover,
.div1>img:focus {
    filter: none;
}

.div2 {
    background: hsl(335, 100%, 50%);
}

.div2>img {
    width: 100%;
    height: 100%;
    mix-blend-mode: luminosity;
}

.div3 {
    background: url('../img/bg.jpg');
    width: 200px;
    height: 200px;
    background-size: cover;
    background-color: hsl(335, 100%, 50%);
    background-blend-mode: luminosity;
    transition: .5s background-color;
}

.div3:hover {
    background-color: transparent;
}